<template>
  <div class="m-workforce">
    <Header :header="header"></Header>
    <div class="workforce-con">
      <Category @scuuesionIndex = classesIndex></Category>
      <div class="table">
        <table>
          <thead class="thead">
            <tr>
              <th class="name-date">姓名\日期</th>
              <th>06.10</th>
              <th>06.11</th>
              <th>06.12</th>
              <th>06.13</th>
              <th>06.14</th>
              <th>06.15</th>
              <th>06.16</th>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr class="content" v-for="(item, index) in workforceList" :key="index">
              <td class="name">{{item.name}}</td>
              <td>{{item.month1}}</td>
              <td>{{item.month2}}</td>
              <td>{{item.month3}}</td>
              <td>{{item.month4}}</td>
              <td>{{item.month5}}</td>
              <td>{{item.month6}}</td>
              <td>{{item.month7}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <Floating-Menu :index = $route.query.index></Floating-Menu>
  </div>
</template>

<script>
import Header from '../../publicComponent/Header'
import Category from '../ManageSuccession/Category'
import FloatingMenu from '../../publicComponent/FloatingMenu'
let workforceList = require('../../../static/js/workforce')
export default {
  name: 'Workforce',
  components: {
    Header,
    Category,
    FloatingMenu
  },
  data () {
    return {
      header: {},
      category: ['月排班', '周排班', '日排班'],
      workforceList: []
    }
  },
  mounted () {
    this.workforceList = workforceList[0]
  },
  methods: {
    classesIndex (index) {
      this.workforceList = workforceList[index]
    }
  }
}
</script>

<style lang="stylus" scoped>
.m-workforce
  height 100%
  background-color #eef2f5
  .workforce-con
    padding 0 0.3rem
    .table
      background-color #fff
      box-sizing: border-box
      padding: .5rem .4rem
      // height: 8.04rem
      // overflow-y: scroll
      table
        display: inline-block
        width 100%
        border-collapse collapse
        text-align: center
        .thead
          display: table
          width: 100%
          table-layout: fixed
          font-size 0.28rem
          tr
            th
              color #8fa1b6
            .name-date
              color #1c1c1c
        .tbody
          display: inline-block
          height: 6.56rem
          overflow-y: auto
          tr
            display: table
            table-layout: fixed
            width: 100%
            .name
              color: #1c1c1c
        td,th
          height 0.82rem
          line-height 0.82rem
          border 1px solid #cccccc
          width 2.1875rem
          text-align center
          color #1090eb
</style>
